/**
 * @description List3列表对应的装修3属性
 */
import React from 'react';
import { Collapse, Form, InputNumber } from 'antd';

import { getPropData } from './utils';
import StyleWrapper from '@/components/StylesWrapper';


function GoodAttr3({ blockKey, form, upateStyleEvent, onConfigEvent }) {


  // 属性的输入框变化时，触发 upateStyleEvent --> 更新style样式
  let handleStyleEvent = (paramKey) => {
    upateStyleEvent([blockKey, `${blockKey}_${paramKey}`])
  }

  return (
    <>
      <Form.Item
        label="左个数"
        name={[blockKey, 'base', 'leftLimit']}
      >
        <InputNumber
          min={0}
          precision={0}
          onChange={(value) => onConfigEvent([blockKey, 'base', 'leftLimit'], value)}
        />
      </Form.Item>

      <Form.Item
        label="右个数"
        name={[blockKey, 'base', 'rightLimit']}
      >
        <InputNumber
          min={0}
          precision={0}
          onChange={(value) => onConfigEvent([blockKey, 'base', 'rightLimit'], value)}
        />
      </Form.Item>

      <Collapse accordion items={[
        {
          key: "box",
          label: "总盒子",
          children: <StyleWrapper form={form} {...getPropData(blockKey, 'list_box', 'default')} onStyleChange={() => handleStyleEvent('list_box')} />
        },
        {
          key: "left",
          label: "左盒子",
          children:
            <Collapse accordion size='middle' items={[
              {
                key: 'box',
                label: "盒子",
                children: <StyleWrapper form={form} {...getPropData(blockKey, 'list_left', 'default')} onStyleChange={() => handleStyleEvent('list_left')} />
              },
              {
                key: 'item',
                label: "item",
                children: <StyleWrapper form={form} {...getPropData(blockKey, 'list_left_item', 'default')} onStyleChange={() => handleStyleEvent('list_left_item')} />

              },
              {
                key: 'img',
                label: "图片",
                children: <StyleWrapper form={form} {...getPropData(blockKey, 'list_left_imgbox', 'default')} onStyleChange={() => handleStyleEvent('list_left_imgbox')} />
              },
              {
                key: 'img-hover',
                label: "图片-悬浮",
                children: <StyleWrapper form={form} {...getPropData(blockKey, 'list_left_imgbox_hover', 'default')} onStyleChange={() => handleStyleEvent('list_left_imgbox_hover')} />
              },
              {
                key: 'info',
                label: "信息盒子",
                children: <StyleWrapper form={form} {...getPropData(blockKey, 'list_left_info', 'default')} onStyleChange={() => handleStyleEvent('list_left_info')} />
              },
              {
                key: 'title',
                label: "标题",
                children: <StyleWrapper form={form} {...getPropData(blockKey, 'list_left_title', 'default')} onStyleChange={() => handleStyleEvent('list_left_title')} />
              },
              {
                key: 'title-hover',
                label: "标题-悬浮",
                children: <StyleWrapper form={form} {...getPropData(blockKey, 'list_left_title_hover', 'default')} onStyleChange={() => handleStyleEvent('list_left_title_hover')} />
              },
              {
                key: 'price',
                label: "价格",
                children: <StyleWrapper form={form} {...getPropData(blockKey, 'list_left_price', 'default')} onStyleChange={() => handleStyleEvent('list_left_price')} />
              },
              {
                key: 'time',
                label: "时间",
                children: <StyleWrapper form={form} {...getPropData(blockKey, 'list_left_time', 'default')} onStyleChange={() => handleStyleEvent('list_left_time')} />
              },
              {
                key: 'desc',
                label: "描述",
                children: <StyleWrapper form={form} {...getPropData(blockKey, 'list_left_desc', 'default')} onStyleChange={() => handleStyleEvent('list_left_desc')} />
              },
            ]} />
        },
        {
          key: "right",
          label: "右盒子",
          children:
            <Collapse accordion size='middle' items={[
              {
                key: 'box',
                label: "盒子",
                children: <StyleWrapper form={form} {...getPropData(blockKey, 'list_right', 'default')} onStyleChange={() => handleStyleEvent('list_right')} />
              },
              {
                key: 'item',
                label: "item",
                children: <StyleWrapper form={form} {...getPropData(blockKey, 'list_right_item', 'default')} onStyleChange={() => handleStyleEvent('list_right_item')} />
              },
              {
                key: 'title',
                label: "标题",
                children: <StyleWrapper form={form} {...getPropData(blockKey, 'list_right_title', 'default')} onStyleChange={() => handleStyleEvent('list_right_title')} />
              },
              {
                key: 'title-active',
                label: "标题-激活",
                children: <StyleWrapper form={form} {...getPropData(blockKey, 'list_right_title_active', 'default')} onStyleChange={() => handleStyleEvent('list_right_title_active')} />
              },
              {
                key: 'icon',
                label: "图标",
                children: <StyleWrapper form={form} {...getPropData(blockKey, 'list_right_icon', 'default')} onStyleChange={() => handleStyleEvent('list_right_icon')} />
              },
              {
                key: 'desc-box',
                label: "描述盒子",
                children: <StyleWrapper form={form} {...getPropData(blockKey, 'list_right_descbox', 'default')} onStyleChange={() => handleStyleEvent('list_right_descbox')} />
              },
              {
                key: 'desc-box-active',
                label: "描述盒子-激活",
                children: <StyleWrapper form={form} {...getPropData(blockKey, 'list_right_descbox_active', 'default')} onStyleChange={() => handleStyleEvent('list_right_descbox_active')} />
              },
              {
                key: 'desc',
                label: "描述",
                children: <StyleWrapper form={form} {...getPropData(blockKey, 'list_right_desc', 'default')} onStyleChange={() => handleStyleEvent('list_right_desc')} />
              },
            ]} />
        },
      ]}
      />
    </>

  )
}



export default React.memo(GoodAttr3)